{% extends 'course/base.html' %}
{% load staticfiles %}
{% block content %}

        <!-- Page Heading -->
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">
                    Discussion
                    <small>Ask any questions here</small>
                </h1>
                <ol class="breadcrumb">
                    <li>
                        <i class="fa fa-university"></i>  <a href="/courses">Courses</a>
                    </li>
                    <li>
                        <i class="fa fa-compass"></i> {{ course.title }}
                    </li>
                    <li>
                        <i class="fa fa-fw fa-comment"></i>  <a href="/course/{{ course.id }}/discussion">Discussion</a>
                    </li>
                    <li class="active">
                        <i class="fa fa-fw fa-comment"></i> Thread #{{ thread.thread_id }}
                    </li>
                </ol>
            </div>
        </div>
        <!-- /.row -->
        
        <!-- Posts Table -->
        <div id="ajax_posts_table"
           name="ajax_posts_table">
            {% include "course/discussion/posts_table.html" %}
        </div>

        <!-- /.row -->
        
<script>
    function ajax_refresh_posts_table()
    {
        $.ajax( {{ thread.thread_id }} + '/posts_table', {
            data: {
               'csrfmiddlewaretoken': '{{ csrf_token }}',
            },
            type: 'post',
            success: function(result) {
               // success code execution here
               $('#ajax_posts_table').html(result); // Update UI.
            },
            error: function(xhr,status,error) {
               // error code here
            },
            complete: function(xhr,status) {
               // completion code here
            }
        });
    }

    function ajax_new_post_modal(thread_id)
    {
        $('#reply_' + thread_id + '_btn').prop("disabled", true); // Lock button
        $.ajax( thread_id + '/new_post', {
            data: {
               'csrfmiddlewaretoken': '{{ csrf_token }}',
            },
            type: 'post',
            success: function(result) {
               // success code execution here
               $('#ajax_new_post').html(result); // Update UI.
               $('#new_post_modal').modal();     // Unhide view.
            },
            error: function(xhr,status,error) {
               // error code here
            },
            complete: function(xhr,status) {
               // completion code here
            }
        });
    }

    function ajax_insert_post(thread_id)
    {
        $('#submit_post_btn').prop("disabled", true);
        if (typeof(thread_id)==='undefined')
        {
            thread_id = 0;
        }
    
        // Create a FormData Object using your form dom element and load
        // up the initial data first, then update it on question type.
    
        // Basic
        var data = new FormData();
        data.append('csrfmiddlewaretoken', '{{ csrf_token }}');
        data.append('title', $('#id_title').val());
        data.append('text', $('#id_text').val());
        data.append('thread_id', thread_id);
    
        jQuery.ajax({
            url: thread_id + '/insert_post',
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',
            success: function(json_result){
                // success code execution here
                if (json_result.status == 'success')
                {
                    $('#new_post_modal').modal('hide');
                    ajax_refresh_posts_table();
                }
                else
                {
                    alert(json_result.message);
                }
            },
            error: function(xhr,status,error) {
                // error code here
            },
            complete: function(xhr,status) {
                // completion code here
                $('#submit_post_btn').prop("disabled", false);
            }
        });
    }

    function ajax_delete_thread(thread_id)
    {
        var url = 'delete_thread';
    
        $.ajax( url, {
            data: {
               'csrfmiddlewaretoken': '{{ csrf_token }}',
               'thread_id': thread_id,
            },
            type: 'post',
            success: function(result) {
               // success code execution here
               if (result.status == 'success')
               {
                    ajax_refresh_posts_table(); // Reload UI.
               }
               else
               {
                    print_error(result.message);
               }
            },
            error: function(xhr,status,error) {
               // error code here
            },
            complete: function(xhr,status) {
               // completion code here
            }
        });
    }

    function ajax_view_thread(thread_id)
    {
        window.location = 'thread/' + thread_id;
    }

    /**
     * Prints a error box with the contents of the errors received from the server.
     */
    function print_error(json_result)
    {
        $('#error_box').prop("hidden", false); // Display error box.
    
        // Iterate through the JSON array of arrays and generate an error string.
        var message = "<b>Error(s):</b><hr/>";
        var data = $.parseJSON(json_result)
        for (var key in data) {
            if (data.hasOwnProperty(key)) { // this will check if key is owned by data object and not by any of it's ancestors
                message += "<p>" + key + ": " + data[key] + "<p>";
            }
        }
        
        // Replace the error string with the contents of the error box.
        $('#error_box').html(message);
    }
</script>

<!-- Modal -->
<div id="ajax_new_post"
   name="ajax_new_post"></div>
<!-- /.Modal -->

{% endblock content %}